<template>
  <el-main class="el-mainContent height100 setting" >
    <div class="content">
      <el-row  > 
        <p class="  smallHeader">{{$t('base_setting')}}</p>
        </el-row>
      <el-row>
        <el-col :span="12">
          <el-form label-position="top" size="mini" >
          <el-form-item :label="$t('multiuserlogin')" class="radioItem" >
        <el-radio v-model="detail.multiuserlogin" label="true">是</el-radio>
        <el-radio v-model="detail.multiuserlogin" label="false">否</el-radio>
      </el-form-item>
          <el-form-item :label="$t('haveImg')" class="paddingT8">
          <div class="adminLogo d-inlineBlock">
                <img class="verticalBottom adminLogoImg" id="_iconImg" alt :src="$api.getLogoUrl(detail.loginbackground)" v-if="detail.loginbackground"/>
                <i v-else class="el-icon-plus" @click="uploadBgImg"></i>
            </div>

          <div  class="setBtn">
            <div style="color: red">({{$t('recommendSize')}}:1376*786)</div>
            <div class="btn">
              <el-button class="obpm-btn-default mr-1 bluebgColor" plain @click="uploadBgImg">{{$t('uploadBgImg')}}</el-button>
              <el-button type="danger" plain @click="cleanBgImg">{{$t('cleanBgImg')}}</el-button>
            </div>
          </div>
        </el-form-item>
        <el-form-item :label="$t('authType')">
        <el-radio-group v-model="detail.authType" @change="changeAuth">
          <el-radio  label="default">{{$t('interface')}}</el-radio>
          <el-radio  label="sso">{{$t('sso')}}</el-radio>
          <el-radio  label="ssl_pkcs12">{{$t('ssl_pkcs12')}}</el-radio>
        </el-radio-group>
        </el-form-item>
        <el-form-item :label="$t('tokenEffectiveTime')">
          <el-input type="text" v-model="detail.tokenEffectiveTime"></el-input>{{$t('hour')}}
        </el-form-item>
        <template v-if="!isOpen">
          <el-row>
            <el-form-item label="是否开启手机短信验证"    >
              <!-- <el-checkbox v-model="detail.smsAuthenticate" >打开</el-checkbox> -->
              <el-switch v-model="detail.smsAuthenticate"  active-value="true" inactive-value="false"></el-switch>
              <p class="tip-text">注意:开启手机短信验证需要重启服务器后才生效</p>
            </el-form-item>
          </el-row>
        </template>
      </el-form>
        </el-col>
        <el-col :span="12">
          <el-form v-if="detail.authType=='default'" label-position="top" size="mini">
         <el-row>
          <el-row>
            <el-form-item :label="$t('smsAffectMode')" >
              <el-radio-group v-model="detail.smsAffectMode" :disabled="detail.smsAuthenticate=='true'? false: true">
                <el-radio  label="all">{{$t('all')}}ip</el-radio>
                <el-radio  label="match">{{$t('match')}}</el-radio>
                <el-radio  label="exclude">{{$t('exclude')}}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-row>
         
          <el-row>
            <el-form-item :label="$t('smsTimeout')"    >
              <el-input type="text" v-model="detail.smsTimeout"  :disabled="detail.smsAuthenticate=='true'? false: true"></el-input>
            </el-form-item>
          </el-row>
          <template v-if="!isOpen">
            <el-row>
              <el-form-item :label="$t('smsContent')"    >
                <el-input type="textarea" v-model="detail.smsContent"  :disabled="detail.smsAuthenticate=='true'? false: true"></el-input>
              </el-form-item>
            </el-row>
          </template>
          <el-row>
            <el-form-item :label="$t('ip_range')"     >
              <el-input type="text" class="ip-range" v-model="detail.smsStartRangeIp" :disabled="detail.smsAuthenticate=='true' && (detail.smsAffectMode=='match'|| detail.smsAffectMode=='exclude')? false: true"></el-input>
              <el-input type="text" class="ip-range" v-model="detail.smsEndRangeIp"  :disabled="detail.smsAuthenticate=='true' && (detail.smsAffectMode=='match'|| detail.smsAffectMode=='exclude')? false: true"></el-input>
            </el-form-item>
          </el-row>
      </el-row>
    </el-form>
    <el-form v-if="detail.authType=='sso'" label-position="top"  size="small">
      <el-row>
        <el-col :span="6">
          <el-row>
            <el-form-item :label="$t('checkldap')"   >
              <el-select v-model="checkldap" :placeholder="$t('placeholder_select')" @change="changeAuth">
                <el-option
                  v-for="item in ssoAuthOption"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
              <div v-if="detail.ssoAuth=='cn.myapps.security.sso.CasUserSSO'" class="tip-text orangeColor">{{$t('cas_service_reopen_valid')}}</div>

            </el-form-item>
          </el-row>
          <!-- cookie -->
          <!-- cas -->
          <!-- AD/LDAP -->
          <el-row v-if="detail.ssoAuth=='cn.myapps.security.sso.ADUserSSO'">
            <el-form-item :label="$t('ssoRedirect')"   >
              <el-input type="text" v-model="detail.ssoRedirect"></el-input>
            </el-form-item>
          </el-row>
        </el-col>
        <el-col :span="6" :offset="6">
          <!-- cas -->
          <el-row  v-if="detail.ssoAuth=='cn.myapps.security.sso.CasUserSSO'">
            <el-form-item :label="$t('localServerName')"   >
              <el-input type="text" v-model="detail.localServerName" ></el-input>
            </el-form-item>
          </el-row>
          <!-- AD/LDAP -->
          <el-row  v-if="detail.ssoAuth=='cn.myapps.security.sso.ADUserSSO' || detail.ssoAuth=='cn.myapps.security.sso.ADUserSSOJespa'">
            <el-form-item :label="$t('adDomainController')"    >
              <el-input type="text" v-model="detail.adDomainController" ></el-input>
            </el-form-item>
          </el-row>
        </el-col>
      </el-row>
      <el-row  v-if="detail.authType=='sso' && detail.ssoAuth=='cn.myapps.security.sso.CasUserSSO'">
        <el-col :span="6">
            <el-form-item :label="$t('casLoginUrl')"   >
              <el-input type="text" v-model="detail.casLoginUrl"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6" :offset="6">
            <el-form-item :label="$t('casUrlPrefix')"   >
              <el-input type="text" v-model="detail.casUrlPrefix"></el-input>
            </el-form-item>
            </el-col>
          </el-row>
          <el-row  v-if="detail.authType=='sso' && detail.ssoAuth=='cn.myapps.security.sso.CookieUserSSO'">
        <el-col :span="6">
          <el-form-item :label="$t('ssoRedirect')"    >
              <el-input type="text" v-model="detail.ssoRedirect"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6" :offset="6">
            <el-form-item :label="$t('ssoLogoutRedirect')"   >
              <el-input type="text" v-model="detail.ssoLogoutRedirect" ></el-input>
            </el-form-item>
            </el-col>
          </el-row>
          <el-row  v-if="detail.authType=='sso' && detail.ssoAuth=='cn.myapps.security.sso.CasUserSSO'">
        <el-col :span="6">
          <el-form-item :label="$t('ssoRedirect')"   >
              <el-input type="text" v-model="detail.ssoRedirect"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6" :offset="6">
            <el-form-item :label="$t('ssoLogoutRedirect')"   >
              <el-input type="text" v-model="detail.ssoLogoutRedirect" ></el-input>
            </el-form-item>
            </el-col>
          </el-row>
          <el-row  v-if="detail.authType=='sso' && detail.ssoAuth=='cn.myapps.security.sso.ADUserSSO' || detail.ssoAuth=='cn.myapps.security.sso.ADUserSSOJespa'">
        <el-col :span="6">
          <el-form-item :label="$t('adDefaultDomain')"    >
              <el-input type="text" v-model="detail.adDefaultDomain"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6" :offset="6">
            <el-form-item :label="$t('adadminloginno')"    >
              <el-input type="text" v-model="detail.adadminloginno"></el-input>
            </el-form-item>
            </el-col>
          </el-row>
          <el-row v-if="detail.authType=='sso' && detail.ssoAuth=='cn.myapps.security.sso.ADUserSSO' || detail.ssoAuth=='cn.myapps.security.sso.ADUserSSOJespa'">
            <el-col :span="6">
              <el-form-item :label="$t('adlogindomain')"    >
              <el-input type="text" v-model="detail.adlogindomain"></el-input>
            </el-form-item>
            </el-col>
            <el-col :span="6" :offset="6">
              <el-form-item :label="$t('adadminloginnopw')" >
              <el-input type="text" v-model="detail.adadminloginnopw"></el-input>
            </el-form-item>
          </el-col>
          </el-row>
      <el-row  v-if="detail.ssoAuth=='cn.myapps.security.sso.ADUserSSOJespa'">
        <el-divider content-position="left" class="   el-divider-bottom">{{$t('support_ntlm_setting')}}<span>{{$t('msg_jespa')}}</span></el-divider>
        <el-row>
          <el-col :span="6">
            <el-form-item :label="$t('adjespausernmae')"   >
              <el-input type="text" v-model="detail.adjespausernmae" ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6" :offset="6">
            <el-form-item :label="$t('adjespapassword')"   >
              <el-input type="text" v-model="detail.adjespapassword"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-row>
        <el-row  v-if="detail.ssoAuth=='cn.myapps.security.sso.ADUserSSO' || detail.ssoAuth=='cn.myapps.security.sso.ADUserSSOJespa'">
          <el-divider content-position="left" class="   el-divider-bottom">{{$t('user_synchronization')}}</el-divider>
          <el-row>
            <el-col :span="6">
              <el-form-item :label="$t('ssoDefaultEmail')"   >
                <el-input type="text" v-model="detail.ssoDefaultEmail" ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6" :offset="6">
              <el-form-item :label="$t('ssoDefaultPassword')"   >
                <el-input type="text" v-model="detail.ssoDefaultPassword"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-row>
    </el-form>
    <el-form v-if="detail.authType=='ssl_pkcs12'">
    </el-form>
        </el-col>
      </el-row>
    </div>
    <!-- <p class="  smallHeader">{{$t('setting_after_auth')}}</p>
    <el-form label-position="top"  size="small" class="demo-form-inline"> 
      <el-row>
        <el-col  :span="6">
          <el-form-item :label="$t('ssoSaveType')"   >
            <el-select v-model="detail.ssoSaveType" :placeholder="$t('placeholder_select')">
              <el-option :label="$t('none')" value="none"></el-option>
              <el-option label="cookie" value="cookie"></el-option>
              <el-option label="session" value="session"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col  :span="6" :offset="6">
          <el-form-item :label="$t('ssoDataEncryption')"   >
            <el-select v-model="detail.ssoDataEncryption" :placeholder="$t('placeholder_select')">
              <el-option :label="$t('none')" value="none"></el-option>
              <el-option label="base64" value="base64"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-form-item :label="$t('ssoKeyLoginAccount')" prop="loginno"   >
            <el-input type="text" v-model="detail.ssoKeyLoginAccount"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6" :offset="6">
          <el-form-item :label="$t('ssoKeyDomain')" prop="loginno"   >
            <el-input type="text" v-model="detail.ssoKeyDomain"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-form-item :label="$t('ssoKeyEmail')" prop="loginno"   >
            <el-input type="text" v-model="detail.ssoKeyEmail"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form> -->
    <fileUpload :visible.sync="fileUploadVisible" v-if="fileUploadVisible" :nowOption="nowOption" :selectOption="selectOption" @checkUpload="onCheckUpload"/>

  </el-main>
</template>

<script>

import fileUpload from "@/components/fileUpload.vue";

export default {
  data(){
    return {
      authType:"",
      checkldap: '',
      ssoAuthOption:[{
          value: 'cn.myapps.security.sso.CookieUserSSO',
          label: 'cookie'
        }, {
          value: 'cn.myapps.security.sso.CasUserSSO',
          label: 'Cas '+this.$t('server')
        }, {
          value: 'cn.myapps.security.sso.ADUserSSO',
          label: 'AD/LDAP'
        }, {
          value: 'cn.myapps.security.sso.ADUserSSOJespa',
          label: 'AD/LDAP'+this.$t('support_ntml2_protocol')
      }],
      fileUploadVisible:false,
      nowOption:'iconUpload',
      selectOption:'bgImg',
      haveImg:'noLogo',
      isOpen:false,//开关是否开启
    }
  },
  components:{
    fileUpload,  
  },
  props:["detail","height"],
  watch:{
    detail: {
      handler(newVal, oldVal) {
        this.detail = newVal;
        this.authType = this.detail.authType;
        this.checkldap = this.detail.ssoAuth;
        this.changeAuth();
        if (this.detail.loginbackground != "") {
          this.haveImg = "adminLogo";
        }
      },
      deep: true,
      immediate: true,
    },
  },
  created() {
    if(this.$store.state.currentUser && this.$store.state.currentUser.isOpenSecurity) {
      this.isOpen=true;
    }
  },
  methods: {
    //上传背景图
    uploadBgImg(){
      this.fileUploadVisible=true;
    },
    cleanBgImg(){
      this.detail.loginbackground='';
    },
    onCheckUpload(file){
     if(file && file.length>0){
       this.detail.loginbackground=file[0].filePath;
     }
    },
    changeAuth(){
      if(this.detail.authType == 'sso' && this.checkldap == 'cn.myapps.security.sso.ADUserSSO' || this.checkldap=='cn.myapps.security.sso.ADUserSSOJespa'){
        this.$emit('changeLdap',true );
      }else{
        this.$emit('changeLdap',false );
      }
      this.detail.ssoAuth = this.checkldap
    },
  },
};
</script>
<style lang="scss" scoped>

</style>